<template>
  <a-table :columns="columns" :data-source="data" :pagination="false" width="100%">
    <a-checkbox
      slot="enable"
      slot-scope="value, record, index"
      :checked="value"
      :disabled="isCheckboxDisabled(index)"
      @click="() => handleClick(record, index)"
    >
    </a-checkbox>
    <a-select
      slot="defaultValue"
      slot-scope="value, record, index"
      v-model="record.defaultValue"
      placeholder="请选择"
      style="width: 150px"
      allowClear
      :disabled="isSelectDisabled(index) || !record.enable"
      @change="value => handleChange(value, index, record.key)"
    >
      <template>
        <a-select-option :value="item.id" v-for="(item, index) in record.options" :key="index">
          {{ item.extName }}
        </a-select-option>
      </template>
    </a-select>
  </a-table>
</template>

<script>
import { getDistList } from '@/api/system/system'
import { isArray } from 'lodash-es'
export default {
  props: {
    area: {
      type: Array,
      default: () => []
    },
    enableValue: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      columns: [
        {
          title: '数据层级',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '是否启用',
          dataIndex: 'enable',
          key: 'enable',
          scopedSlots: { customRender: 'enable' }
        },
        {
          title: '默认值',
          dataIndex: 'defaultValue',
          key: 'defaultValue',
          scopedSlots: { customRender: 'defaultValue' }
        }
      ],
      data: [
        {
          key: 'province',
          name: '省',
          enable: true,
          defaultValue: undefined,
          options: []
        },
        {
          key: 'city',
          name: '市',
          enable: false,
          defaultValue: undefined,
          options: []
        },
        {
          key: 'area',
          name: '区县',
          enable: false,
          defaultValue: undefined,
          options: []
        },
        {
          key: 'street',
          name: '乡镇',
          enable: false,
          defaultValue: undefined,
          options: []
        }
      ]
    }
  },
  watch: {
    area: {
      handler: function(newValue) {
        if (!isArray(newValue)) return

        newValue.forEach((item, index) => {
          // 设置下拉框值
          this.data[index].defaultValue = item
          const dataItem = this.data[index + 1]
          if (dataItem) {
            // 用当前的值去查下一级的选项列表
            this.getAddressData(newValue[index], dataItem.key)
          }
        })
      },
      immediate: true,
      deep: true
    },
    enableValue: {
      handler: function(newValue) {
        // 回显选中
        while (newValue-- > 0) {
          this.data[newValue].enable = true
        }
      },
      immediate: true
    }
  },
  computed: {
    defaultValueComputed() {
      return this.data.filter(item => item.defaultValue).map(item => item.defaultValue)
    },
    enableValueComputed() {
      return this.data.reduce((pre, currentValue, index) => {
        if (currentValue.enable) {
          pre++
        }
        return pre
      }, 0)
    }
  },
  mounted() {
    if (!this.getOption('province').options.length) this.getAddressData('0', 'province')
  },
  methods: {
    handleEmit() {
      this.$emit('getArea', {
        area: this.defaultValueComputed,
        enableValue: this.enableValueComputed
      })
    },
    handleClick(record, index) {
      record.enable = !record.enable

      let currIndex = index

      if (record.enable) {
        // 选中上级
        while (--currIndex > 0) {
          if (this.data[currIndex].enable) {
            break
          }
          this.data[currIndex].enable = record.enable
        }
      } else {
        const dataLenght = this.data.length
        // 取消选中下级,并清空选择的值
        while (++currIndex < dataLenght) {
          this.data[currIndex].enable = record.enable
        }
        // 清空下级选中值
        while (index < dataLenght) {
          this.data[index++].defaultValue = undefined
        }
      }
      this.handleEmit()
    },
    isCheckboxDisabled(index) {
      if (index === 0) return true
      return false
    },
    getOption(key) {
      return this.data.find(item => item.key === key)
    },
    handleChange(value, index) {
      let currIndex = index
      const dataLenght = this.data.length

      // 清空下级选中值
      while (++currIndex < dataLenght) {
        this.data[currIndex].defaultValue = undefined
      }

      if (index + 1 < dataLenght) {
        // 查询下一个选择框的选项列表
        this.getAddressData(value, this.data[index + 1].key)
      }

      this.handleEmit()
    },
    isSelectDisabled(index) {
      if (index === 0) return false
      const item = this.data[index - 1]
      return !item.defaultValue
    },
    async getAddressData(value, type) {
      let key = type + '_' + value
      let sessionStorageItem = sessionStorage.getItem(key)

      //优先取缓存数据
      if (sessionStorageItem) {
        this.getOption(type).options = JSON.parse(sessionStorageItem)
        return
      }

      var params = {
        pid: value
      }
      const { rows } = await getDistList(params)
      this.getOption(type).options = rows
      sessionStorage.setItem(key, JSON.stringify(rows))
    }
  }
}
</script>
